<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>选择职位</title>
</head>
<body>

<form name="myform">
  <table>
    <tr>
	  <td>可选职位</td>
	  <td></td>
	  <td>已选职位</td>
	</tr>
	<tr>
	  <td>
	    <!--添加“可选职位”列表框-->
	    <select name="job" size="6" multiple="multiple">
		  <option value="歌手">歌手</option>
		  <option value="演员">演员</option>
		  <option value="画家">画家</option>
		  <option value="教师">教师</option>
		  <option value="公务员">公务员</option>
		  <option value="职员">职员</option>
		</select>
	  </td>
	  <td>
	    <!--添加“>>”和“<<”按钮-->
	    <input type="button" value=">>" onClick="myJob()"><br>
		<input type="button" value="<<" onClick="toJob()">
	  </td>
	  <td>
	    <!--添加“已选职位”列表框-->
	    <select name="myjob" size="6" multiple="multiple">
		</select>
	  </td>
	</tr>
  </table>
</form>
<script type="text/javascript">
function myJob(){//定义myJob()函数
	var jobLength = document.myform.job.length;//获取“可选职位”下拉菜单选项个数
	for(var i=jobLength-1; i>-1; i--){//从最后一个选项开始循环
		if(document.myform.job[i].selected){//如果该选项被选中
			var myOption = new Option(document.myform.job[i].text,document.myform.job[i].value);//创建Option对象
			document.myform.myjob.options[document.myform.myjob.options.length] = myOption;//为“已选职位”下拉菜单添加选项
			document.myform.job.remove(i);//删除移动的选项
		}
	}
}
function toJob(){//定义toJob()函数
	var myjobLength = document.myform.myjob.length;//获取“已选职位”下拉菜单选项个数
	for(var i=myjobLength-1; i>-1; i--){//从最后一个选项开始循环
		if(document.myform.myjob[i].selected){//如果该选项被选中
			var myOption = new Option(document.myform.myjob[i].text,document.myform.myjob[i].value);//创建Option对象
			document.myform.job.options[document.myform.job.options.length] = myOption;//为“可选职位”下拉菜单添加选项
			document.myform.myjob.remove(i);//删除移动的选项
		}
	}
}
</script>
</body>
</html>
